<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <div id="barChart2" style="height: 400px; width: 100%" />
      </el-col>
      <el-col :span="12">
        <el-table :data="ls" stripe style="width: 100%" height="400">
          <el-table-column prop="医生" label="医生"> </el-table-column>
          <el-table-column prop="病例数" label="人次" sortable>
          </el-table-column>
          <el-table-column label="药品消耗">
            <template slot-scope="scope">
              <el-link type="primary" @click="药品_click(scope.row, '药品')">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    比例(scope.row.药品费, scope.row.病例数) +
                    '/' +
                    比例(scope.row.标准药品费, scope.row.病例数)
                  "
                  placement="right"
                >
                  <span
                    v-bind:class="{
                      ffred: IsRed(scope.row.药品费, scope.row.标准药品费),
                    }"
                    >{{ 比例(scope.row.药品费, scope.row.标准药品费) }}</span
                  >
                </el-tooltip>
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="检验消耗">
            <template slot-scope="scope">
              <el-link type="primary" @click="药品_click(scope.row, '检验')">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    比例(scope.row.检验费, scope.row.病例数) +
                    '/' +
                    比例(scope.row.标准检验费, scope.row.病例数)
                  "
                  placement="right"
                >
                  <span
                    v-bind:class="{
                      ffred: IsRed(scope.row.检验费, scope.row.标准检验费),
                    }"
                    >{{ 比例(scope.row.检验费, scope.row.标准检验费) }}</span
                  >
                </el-tooltip>
              </el-link>
            </template>
          </el-table-column>

          <el-table-column label="检查消耗">
            <template slot-scope="scope">
              <el-link type="primary" @click="药品_click(scope.row, '检查')">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    比例(scope.row.检查费, scope.row.病例数) +
                    '/' +
                    比例(scope.row.标准检查费, scope.row.病例数)
                  "
                  placement="right"
                >
                  <span
                    v-bind:class="{
                      ffred: IsRed(scope.row.检查费, scope.row.标准检查费),
                    }"
                    >{{ 比例(scope.row.检查费, scope.row.标准检查费) }}</span
                  >
                </el-tooltip>
              </el-link>
            </template>
          </el-table-column>

          <el-table-column label="治疗消耗">
            <template slot-scope="scope">
              <el-link type="primary" @click="药品_click(scope.row, '治疗')">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    比例(scope.row.治疗费, scope.row.病例数) +
                    '/' +
                    比例(scope.row.标准治疗费, scope.row.病例数)
                  "
                  placement="right"
                >
                  <span
                    v-bind:class="{
                      ffred: IsRed(scope.row.治疗费, scope.row.标准治疗费),
                    }"
                    >{{ 比例(scope.row.治疗费, scope.row.标准治疗费) }}</span
                  >
                </el-tooltip>
              </el-link>
            </template>
          </el-table-column>

          <el-table-column label="耗材消耗">
            <template slot-scope="scope">
              <el-link type="primary" @click="药品_click(scope.row, '耗材')">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    比例(scope.row.耗材费, scope.row.病例数) +
                    '/' +
                    比例(scope.row.标准耗材费, scope.row.病例数)
                  "
                  placement="right"
                >
                  <span
                    v-bind:class="{
                      ffred: IsRed(scope.row.耗材费, scope.row.标准耗材费),
                    }"
                    >{{ 比例(scope.row.耗材费, scope.row.标准耗材费) }}</span
                  >
                </el-tooltip>
              </el-link>
            </template>
          </el-table-column>

          <el-table-column label="手术消耗">
            <template slot-scope="scope">
              <el-link type="primary" @click="药品_click(scope.row, '手术')">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    比例(scope.row.手术费, scope.row.病例数) +
                    '/' +
                    比例(scope.row.标准手术费, scope.row.病例数)
                  "
                  placement="right"
                >
                  <span
                    v-bind:class="{
                      ffred: IsRed(scope.row.手术费, scope.row.标准手术费),
                    }"
                    >{{ 比例(scope.row.手术费, scope.row.标准手术费) }}</span
                  >
                </el-tooltip>
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div id="charts" style="width: 100%"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-dialog
        placement="left"
        :title="项目Row.医生 + '-' + 类别"
        :visible.sync="项目Vble"
        width="600"
      >
        <el-table :data="药品Ls" v-loading="药品Loading">
          <el-table-column label="名称">
            <template scope="scope">
              <el-tooltip
                :content="scope.row.药品说明"
                placement="top"
                popper-class="atooltip"
                v-if="scope.row.药品说明"
              >
                <span style="color: red">{{ scope.row.名称 }}</span>
              </el-tooltip>
              <span v-else>{{ scope.row.名称 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="药品规格显示"
            property="规格"
            label="规格"
          ></el-table-column>
          <el-table-column
            property="医保类型"
            label="医保类型"
          ></el-table-column>
          <el-table-column
            property="单价"
            label="单价"
            width="100"
          ></el-table-column>
          <el-table-column
            property="数量"
            label="数量"
            width="100"
          ></el-table-column>
          <el-table-column
            property="金额"
            label="金额"
            width="100"
          ></el-table-column>
          <el-table-column
            :formatter="人均花费_fmt"
            label="人均花费"
            width="100"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </el-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import * as echarts from "echarts";
import { ECharts } from "echarts";
import { zdjbbar } from "@/api/patient";
import { costLs, medcTop } from "@/api/report";
import { rowAddressFromString } from "hyperformula/typings/parser/addressRepresentationConverters";
@Component({
  name: "zdjbbar",
})
export default class extends Vue {
  private createPipeChar(doc: any) {
    let pipeChart = document.createElement("div") as any;
    pipeChart.style = "height:400px;width:400px;float: left;";
    document.getElementById("charts")?.append(pipeChart);
    let option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      label: {
        formatter: "{b}:({d}%)",
      },
      title: {
        text:
          doc.医生 +
          `（次均费用：${(doc.总费用 / doc.病例数).toFixed(2)}、人次：${
            doc.病例数
          }）`,
        left: "center",
      },
      grid: {
        top: 0,
        bottom: 0,
      },
      series: [
        {
          name: doc.医生,
          type: "pie",
          radius: "50%",
          data: [
            { value: (doc.药品费 / doc.病例数).toFixed(2), name: "药品费" },
            { value: (doc.治疗费 / doc.病例数).toFixed(2), name: "治疗费" },
            { value: (doc.手术费 / doc.病例数).toFixed(2), name: "手术费" },
            { value: (doc.耗材费 / doc.病例数).toFixed(2), name: "耗材费" },
            { value: (doc.检验费 / doc.病例数).toFixed(2), name: "检验费" },
            { value: (doc.检查费 / doc.病例数).toFixed(2), name: "检查费" },
            { value: (doc.其他费 / doc.病例数).toFixed(2), name: "其他费" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    let chart = echarts.init(pipeChart);
    chart.setOption(option);
  }
  private 药品Ls: Array<any> = [];
  private 药品Loading: boolean = false;

  private 项目Row: any = {};
  private 项目Vble: boolean = false;
  private 人均花费_fmt(row: any) {
    return (row.金额 / row.人数).toFixed(2);
  }
  private async 项目TopN(r: any, pt: any) {
    this.药品Loading = true;
    this.项目Vble = !this.项目Vble;
    let query = this.$route.query;
    this.项目Row = r;
    let d = await medcTop({
      stime: query.stime,
      etime: query.etime,
      ks: r.科室,
      code: query.病组编码,
      doc: r.医生,
      t: query.t,
      ts: 5,
      pt: pt,
      ljid: query.ljid,
    });
    this.药品Loading = false;
    return d.data;
  }
  private 类别 = "";
  private 药品规格显示: boolean = false;
  private async 药品_click(r: any, t: string) {
    this.药品规格显示 = t == "药品";
    this.类别 = t;
    this.药品Ls = await this.项目TopN(r, t);
  }

  private parseDouble(x: number) {
    return parseFloat(x.toFixed(2));
  }
  private initChart(ls: Array<any>) {
    let 医生s = ls.map((it: any) => it.医生);
    let 可优化金额s = ls.map((it: any) =>
      this.parseDouble(it.可优化金额 / it.病例数)
    );
    let 并发症金额s = ls.map((it: any) =>
      this.parseDouble(it.并发症金额 / it.病例数)
    );
    let 总费用s = ls.map((it: any) => this.parseDouble(it.总费用 / it.病例数));
    let 标准总费用s = ls.map((it: any) =>
      this.parseDouble(it.标准总费用 / it.病例数)
    )[0];
    let lp = this.$route.query.路径名称;
    let code = this.$route.query.病组编码;
    let option = {
      legend: {
        top: "bottom",
      },

      tooltip: {
        trigger: "axis",
        axisPointer: {
          // Use axis to trigger tooltip
          type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
        },
      },

      title: {
        text: `${lp}-${code} 费用结构深度剖析 病组标杆费用：${标准总费用s}`,
        left: "center",
      },

      xAxis: {
        data: 医生s,
      },
      yAxis: {},
      series: [
        {
          type: "bar",
          name: "次均并发症金额",
          data: 并发症金额s,
          stack: "a",
          label: {
            show: true,
            position: "top",
          },
          // label: {
          //   show: true,
          //   position: 'inside',
          //   formatter: (ps: any) => {
          //     return this.parseDouble(ps.value / 总费用s[ps.dataIndex] * 100) + '%'
          //   }
          // },
        },
        {
          type: "bar",
          name: "次均可优化金额",
          data: 可优化金额s,
          stack: "b",
          label: {
            show: true,
            position: "top",
          },
          // label: {
          //   show: true,
          //   position: 'inside',
          //   formatter: (ps: any) => {
          //     return this.parseDouble(ps.value / 总费用s[ps.dataIndex] * 100) + '%'
          //   }
          // },
        },
        {
          type: "bar",
          name: "次均费用",
          data: 总费用s,
          stack: "c",
          label: {
            show: true,
            position: "top",
          },
        },
        // {
        //   type: "bar",
        //   name: '标准次均费用',
        //   data: 标准总费用s,
        //   stack: "x"
        // },
      ],
    };
    let chart = echarts.init(
      document.getElementById("barChart2") as HTMLDivElement
    );
    chart.setOption(option);
  }
  private IsRed(v1: number, v2: number) {
    let r = (v1 / v2) * 1.0;

    if (r > 1.2) return true;

    return false;
  }
  private IsBlue(v1: number, v2: number) {
    let r = (v1 / v2) * 1.0;

    if (r < 0.8) return true;

    return false;
  }
  private ls: Array<any> = [];
  private 比例(v1: number, v2: number, c: string) {
    let r = (v1 / v2) * 1.0;
    if (r == Infinity) {
      return "∞";
    }

    if (isNaN(r)) {
      return "";
    }
    return r.toFixed(2);
  }

  private async loadData() {
    let lp = this.$route.query.路径名称;
    let c = this.$route.query.病组编码;
    let t = this.$route.query.t;
    let stime = this.$route.query.stime;
    let etime = this.$route.query.etime;
    const { data } = await zdjbbar({
      lp: lp,
      c: c,
      t: t,
      stime: stime,
      etime: etime,
    });
    this.ls = data;
    this.initChart(this.ls);
    this.ls.forEach((val: any) => {
      this.createPipeChar(val);
    });
  }
  private created() {
    this.loadData();
  }
}
</script>
